<template>
	<view class="add_product_page">
		<nav-bar :title=" id ? '编辑产品' : '添加产品' " @back="goBack" :isCenter="true"></nav-bar>
		<view class="product_img_box df" v-if="product_info">
			<view class="img_item" v-for="(item,index) in product_info.url" :key="index">
				<image style="width: 100%;height: 100%;" :src="getImgSrc(item)" mode="aspectFill"></image>
				<view class="delete_btn f13" @click="product_info.url.splice(index,1)">x</view>
			</view>
			<view class="addImg df ac" @click="uploadFile" v-if="is_upload ||  product_info.url.length != 5">
				<van-icon name="plus" size="32" color="#CDCDCD" />
				<view class="text f13" v-if="product_info.url.length == 0">
					添加优质<br />
					首图更吸引人~
				</view>
				<view class="text f13" v-else>
					添加更多<br />
					细节图
				</view>
			</view>
		</view>
		<view class="info_box mt30">
			<view class="df ac sb row1">
				<view class="left">
					产品名称 <text class="bt_text">(必填)</text>
				</view>
				<view class="right">
					<input type="text" v-model="product_info.name" placeholder="请填写" />
				</view>
			</view>
			<view class="row2 df ac sb">
				<view class="left">
					加工工艺 <text class="bt_text">(必填)</text>
				</view>
				<view class="right df ac"
					:style="product_info.machining && product_info.machining != '' ? 'color:#000' : 'color:#808080'"
					@click="showTechnology = true">
					<!-- 请选择 -->
					<view class="right_text">
						{{ product_info.machining ? product_info.machining : '请选择' }}
					</view>
					<view class="df ac arrow_right">
						<van-icon name="arrow" color="color:#808080" />
					</view>
				</view>
			</view>
			<view class="row2 df ac sb">
				<view class="left">
					加工材料
				</view>
				<view class="right df ac" :style=" product_info.material ? 'color:#000' : 'color:#808080' "
					@click="showMaterial = true">
					<view class="right_text">
						{{ product_info.material ? product_info.material : '请选择' }}
					</view>
					<view class="df ac arrow_right">
						<van-icon name="arrow" color="color:#808080" />
					</view>
					<!-- <input type="text" placeholder="请填写" /> -->
				</view>
			</view>
			<view class="row3 df ">
				<view class="r_left df">
					<view class="">
						月产能
					</view>
					<view class="">
						<input type="text" v-model="product_info.number" placeholder="请填写" />
					</view>
				</view>
				<view class="r_right df ">
					<view style="margin:0rpx 10rpx 0rpx 20rpx;">
						单位
					</view>
					<view class="select_r df ac" :style="product_info.piece == '' ? 'color:#808080' : 'color:#000'"
						@click="showUnit = true">
						<view class="right_text">
							{{ product_info.piece ? product_info.piece  : '请选择' }}
						</view>
						<view class="df ac arrow_right">
							<van-icon name="arrow" color="color:#808080" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="add_submit" @click="submitAdd">完成</view>
		<van-popup :show="isBackPress" round position="bottom" custom-style="height: 22%;" @close="isBackPress = false"
			:closeable="true">
			<view class="isBackPress_box" style="padding:0rpx 30rpx;">
				<view class="" style="height: 180rpx;line-height: 180rpx;text-align: center;">
					要不要先存个草稿
				</view>
				<view class="df ac sb">
					<view class="un_save save_btn" @click="isSave(false)">
						不保存
					</view>
					<view class="save save_btn" @click="isSave(true)">
						存草稿
					</view>
				</view>
			</view>
		</van-popup>
		<van-popup :show="showTechnology" position="bottom" round @close='showTechnology = false'>
			<view class="" style="width: 100vw;height: 840rpx;border-radius: 0;">
				<technology :lists="bese_info.machining" v-if="showTechnology" @agree="agree"
					:technologyList='product_info.machining_id' :maxCount="3"/>
			</view>
		</van-popup>

		<van-popup :show="showMaterial" position="bottom" round @close="agreeOrderType('materials')">
			<view class="xPopupTitle"> 加工材料 </view>
			<view class="selectBox">
				<view class="" v-for="(item,index) in bese_info.material" :key="index"
					@tap="checkType(item.id,'materials')" :class="{choosedType:choosedType(item.id,'materials')}">
					{{ item.name }}
				</view>
			</view>
			<view class="submitBtn" @click="agreeOrderType('materials')">
				<view> 确定 </view>
			</view>
		</van-popup>
		<van-popup :show="showUnit" round position="bottom" custom-style="height: 35%;" @close="showUnit = false">
			<view class="isBackPress_box" style="padding:20rpx 30rpx;">
				<!-- <view class="xPopupTitle"> 单位 </view> -->
				<van-picker show-toolbar :columns="Unit_options" @cancel="showUnit = false" @confirm="confirmUnit"
					@change="changeUnit" />
			</view>
		</van-popup>
	</view>
</template>

<script>
	const http = require('../../utils/http');
	import NavBar from '@/component/nav-bar.vue';
	import {
		technology
	} from "@/component/technology.vue"
	export default {
		components: {
			NavBar,
			technology
		},
		data() {
			return {
				id:null,
				showUnit: false,
				Unit_options: ['件', '套', '套（组件装）', '米', '吨', '千克'],
				is_upload:true,
				product_info:{
					name: '',
					machining: '',
					machining_id: [],
					material: '',
					material_id: [],
					url: []
				},
				isBackPress: false,
				showTechnology: false,
				showMaterial: false,
				bese_info: {},
				productIndex: -1,
				// materialList: [],
				productList: [{
					name: '',
					machining: '',
					machining_id: [],
					material: '',
					material_id: [],
					url: ''
				}],
				info_data:null,
				index:-1,
			};
		},
		onBackPress() {
			this.isBackPress = true
		},
		onLoad(opt) {
			console.log(opt)
			this.id = opt.id
			if(this.id && this.id != 0){
				this.getInfo()
			}
		},
		onShow() {
			this.getBese()
			this.getDataInfo()
		},
		methods: {
			getInfo(){
				http.request('user/productInfo',{id:this.id}).then(res => {
					this.product_info = res.data
					// this.product_info.url = [this.product_info.url]
					if(typeof this.product_info.url == 'string' && this.product_info.url[0] != '['){
						this.product_info.url = [this.product_info.url]
					} else {
						this.product_info.url = JSON.parse(this.product_info.url)
					}
					
					this.product_info.machining_id = JSON.parse(this.product_info.machining_id) || []
					this.product_info.material_id = JSON.parse(this.product_info.material_id) || []
					console.log(this.product_info)
				})
			},
			getBese() {
				http.request('user/configData').then(res => {
					this.bese_info = res.data
				})
			},
			getDataInfo(){
				http.request('user/settledInfo').then((res) => {
					this.info_data = res.data.info
				})
			},
			afterRead(event) {
				const {
					file
				} = event.detail;
			},
			agree(id, name) {
				this.product_info.machining = name.join('、')
				this.product_info.machining_id = id
			
				this.showTechnology = false
			},
			choosedType(id, type) {
				let result = false
				if (type == 'materials') {
					result = this.product_info.material_id.includes(id)
				}
				return result
			},
			checkType(id, type) {
				// console.log(id, type)
				if(this.product_info.material_id.length >= 3 && !this.product_info.material_id.includes(id)){
					this.showToast('加工材料最多选3种');
					return;
				}
				if (type === 'materials') {
					// console.log(this.materialsChecked);
					if (this.product_info.material_id.includes(id)) {
						this.product_info.material_id = this.product_info.material_id.filter(item => item != id)
						return
					}
					this.product_info.material_id.push(id)
					return
				}
			},
			agreeOrderType(type) {
				let nameList = []
				if (type == 'materials') {
					this.bese_info.material.forEach((item, index) => {
						if (this.product_info.material_id.includes(item.id)) {
							nameList.push(item.name)
						}
					})
					this.product_info.material = nameList.join("、")
					this.showMaterial = false
				}
			},
			goBack() {
				// this.isBackPress = true
				uni.navigateBack()
			},
			uploadFile() {
				const that = this
				uni.chooseImage({
					success(res) {
						res.tempFiles.forEach(item => {
							http.upLoadFile('base/uploadImg', 'image', item.path, {}).then(rest => {
								if(that.product_info.url.length >= 5){
									that.is_upload = false
									that.showToast('您最多只能上传5张')
									return
								}
								that.product_info.url.push(rest.data.url)
							})
						})
					},
					fail(err) {
						this.showToast(err)
					}
				})
			},
			changeUnit(event) {
				const {
					picker,
					value,
					index
				} = event.detail;
			},
			confirmUnit(event) {
				// console.log(e)
				const {
					value,
					index
				} = event.detail
				this.product_info.piece = value
				this.showUnit = false
			},
			isSave(flag) {
				// if (!flag) {
				// 	uni.navigateBack()
				// 	console.log('不保存')
				// 	return
				// }
				// this.product_info.draft = true
				// uni.setStorageSync('main_products',JSON.stringify(this.product_info))
				uni.navigateBack()
			},
			showToast(message){
				uni.showToast({
					title: message,
					icon: 'none'
				});
			},
			submitAdd() {
				if (!this.product_info.name) {
					this.showToast('请输入产品名称');
					return;
				}
				if (!this.product_info.machining) {
					this.showToast('请选择加工工艺');
					this.showTechnology = true;
					return;
				}
				if(this.product_info.material_id.length > 3){
					this.showToast('加工材料最多选3种');
					// this.showTechnology = true;
					return;
				}
				// console.log(this.product_info.number)
				if(this.product_info.number){
					if(isNaN(Number(this.product_info.number))){
						this.showToast('月产能只能填写数字');
						return;
					}
				}
				let data;
				if(this.id){
					data = {
						id:this.id,
						...this.product_info
					}
				} else {
					data = {
						...this.product_info
					}
				}
				delete data.created_at
				delete data.relation
				data.machining_id = JSON.stringify(this.product_info.machining_id)
				data.material_id = JSON.stringify(this.product_info.material_id)
				data.url = JSON.stringify(this.product_info.url)
				// http.request('user/productEdit',data).then(res => {
				// 	uni.reLaunch({
				// 		url: '/subPack/editSuccess/editSuccess'
				// 	});
				// })
				http.request('user/productEdit',data).then(res => {
					uni.reLaunch({
						url: '/subPack/product/product'
					});
				})
				// uni.navigateBack()

			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.choosedType {
		color: #FFF !important;
		background-color: #1050c7 !important;
	}

	.add_product_page {
		width: 100%;
		height: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.product_img_box {
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #fff;
		flex-wrap: wrap;

		.img_item {
			width: 204rpx;
			height: 204rpx;
			position: relative;
			margin-right: 22rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;

			.delete_btn {
				position: absolute;
				top: 0;
				right: 0;
				border-radius: 0rpx 20rpx 0rpx 8rpx;
				width: 34rpx;
				background-color: rgba(0, 0, 0, 0.8);
				height: 38rpx;
				color: #fff;
				text-align: center;
				line-height: 30rpx;
			}
		}

		.img_item:nth-child(3n) {
			margin-right: 0rpx !important;
		}
	}

	.info_box {
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #fff;

		.bt_text {
			color: red;
			font-size: 24rpx;
			margin-left: 5rpx;
		}

		.row1 {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #F6F6F6;
		}

		.row2 {
			padding: 20rpx 0rpx;
			border-bottom: 1rpx solid #F6F6F6;
		}

		.row3 {
			padding: 20rpx 0rpx 0rpx 10rpx;

			.r_left {
				input {
					boder: none;
					outline: none;
					margin-left: 10rpx;
					width: 150rpx;
					text-align: right;
					border-bottom: 1rpx solid #F6F6F6;
				}
			}

			.select_r {
				width: 150rpx;
				text-align: right;
				justify-content: flex-end;
				border-bottom: 1rpx solid #F6F6F6;

				.right_text {
					width: calc(100% - 30rpx);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding-left: 20rpx;
				}

				.arrow_right {
					width: 30rpx;
				}
			}
		}

		.left {
			width: 200rpx;
		}

		.right {
			width: calc(100% - 200rpx);
			text-align: right;
			// color: #808080;
			justify-content: flex-end;

			input {
				width: 100%;
				border: none;
				outline: none;
				// color: #D8D8D8;
				text-align: right;
			}

			.arrow_right {
				widith: 30rpx;
			}

			.right_text {
				width: calc(100% - 30rpx);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-left: 20rpx;
			}
		}
	}

	::-webkit-input-placeholder {
		color: #D8D8D8 !important;
	}

	.addImg {
		width: 204rpx;
		height: 204rpx;
		background-color: #F7F7F7;
		flex-direction: column;
		justify-content: center;
		border-radius: 20rpx;
		transition: all 0.2s;

		.text {
			color: #CDCDCD;
			text-align: center;
		}
	}

	.addImg:active {
		background: rgba(215, 215, 215, 0.4) !important;
	}

	.save_btn {
		width: 47%;
		padding: 20rpx 0rpx;
		text-align: center;
		border-radius: 40rpx;
	}

	.un_save {
		background: #F5F5F5;
	}

	.save {
		color: #fff;
		background: $xt-primary;
	}

	.submitBtn {
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submitBtn>view {
		background-color: #1050c7;
		width: 690rpx;
		font-weight: 500;
		color: #FFF;
		text-align: center;
		font-size: 32rpx;
		line-height: 96rpx;
		border-radius: 200rpx;
	}

	.xPopupTitle {
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		padding: 30rpx 0 30rpx;
	}

	.selectBox {
		display: flex;
		width: 690rpx;
		margin: 0 auto 50rpx;
		flex-wrap: wrap;
		max-height: 600rpx;
		overflow: auto;

		view {
			margin-bottom: 15rpx;
			margin-right: 15rpx;
			min-width: 220rpx;
			line-height: 66rpx;
			height: 66rpx;
			background: #F7F7F7;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			font-size: 26rpx;
			color: #000000;
			text-align: center;
			transition: all .3s linear;
		}
	}

	.selectBox>view:nth-child(3n) {
		margin-right: 0;
	}

	.add_submit {
		position: fixed;
		bottom: 150rpx;
		left: 50%;
		width: 380rpx;
		background: $xt-primary;
		color: #fff;
		transform: translateX(-50%);
		text-align: center;
		padding: 25rpx 0rpx;
		border-radius: 50rpx;
		transition: all .3s linear;

		&:active {
			opacity: 0.8
		}
	}
</style>